<template>
  <!-- 推荐商家部分 -->
    <div class="recommend">
        <div class="recommend-line"></div>
        <p>推荐商家</p>
        <div class="recommend-line"></div>
    </div>

  <!-- 推荐方式部分 -->
    <div class="recommendtype">
        <div>
            综合排序
            <font-awesome-icon :icon="['fas', 'caret-down']" style="color: #394760;" />
        </div>
        <div>距离最近</div>
        <div>销量最高</div>
        <div>
            筛选
            <font-awesome-icon :icon="['fas', 'filter']" style="color: #394760;" />
        </div>
    </div>

  <!-- 推荐商家列表部分 -->


    <ul class="business">
        <template v-for="(item,index) in businessList" :key="item.businessId">
        <li @click="navigatorToBusinessInfo(item.businessId)">
            <img :src="item.businessImg">
            <div class="business-info">
                <div class="business-info-h">
                    <h3>{{item.businessName}}</h3>
                    <div class="business-info-like">&#8226;</div>
                </div>
                <div class="business-info-star">
                    <div class="business-info-star-left">
                        <font-awesome-icon class="star" :icon="['fas', 'star']"  />
                        <font-awesome-icon class="star" :icon="['fas', 'star']" />
                        <font-awesome-icon class="star" :icon="['fas', 'star']"  />
                        <font-awesome-icon class="star" :icon="['fas', 'star']" />
                        <font-awesome-icon class="star" :icon="['fas', 'star']" />
                        <p>4.9 月售345单</p>
                    </div>
                    <div class="business-info-star-right">
                        蜂鸟专送
                    </div>
                </div>
                <div class="business-info-delivery">
                    <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
                    <p>3.22km | 30分钟</p>
                </div>
                <div class="business-info-explain">
                    <div>{{item.businessExplain}}</div>
                </div>
                <div class="business-info-promotion">
                    <div class="business-info-promotion-left">
                        <div class="business-info-promotion-left-incon">新</div>
                        <p>饿了么新用户首单立减9元</p>
                    </div>
                    <div class="business-info-promotion-right">
                        <p>2个活动</p>
                        <i class="fa fa-caret-down"></i>
                    </div>
                </div>
                <div class="business-info-promotion">
                    <div class="business-info-promotion-left">
                        <div class="business-info-promotion-left-incon"
                             style="background-color: #F1884F;">特</div>
                        <p>特价商品5元起</p>
                    </div>
                </div>
            </div>
        </li>
        </template>
    </ul>
</template>

<script setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import router from "../route/route.js";

import {toRefs} from "vue";
const props = defineProps(["businessList"])
const {businessList} = toRefs(props)
const navigatorToBusinessInfo = (id)=>{
    router.push({path:`/BusinessInfo/${id}`})
}

</script>

<style scoped>
/****************** 推荐商家部分 ******************/
.recommend{

    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.recommend .recommend-line{
    width: 6vw;
    height: 0.2vw;
    background-color: #888;
}
.recommend p{
    font-size: 4vw;
    margin: 0 4vw;
}
/****************** 推荐方式部分 ******************/
.recommendtype{
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;

    display: flex;
    justify-content: space-around;
    align-items: center;
}
.recommendtype li{
    font-size: 3.5vw;
    color: #555;
}
/****************** 推荐商家列表部分 ******************/
.star{
    color: #FEC80E;
    margin-right: 0.5vw;
}
.business{
    width: 100%;
    margin-bottom: 14vw;
    padding-left: 0;
}
.business li{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;
    border-bottom: solid 1px #DDD;

    display: flex;
}
.business li img{
    width: 18vw;
    height: 18vw;
}
.business li .business-info{
    width: 100%;
    box-sizing: border-box;
    padding-left: 3vw;
}
.business li .business-info .business-info-h{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}
.business li .business-info .business-info-h h3{
    font-size: 4vw;
    color: #333;
}
.business li .business-info .business-info-h .business-info-like{
    width: 1.6vw;
    height: 3.4vw;
    background-color: #666;
    color: #fff;
    font-size: 4vw;
    margin-right: 4vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.business li .business-info .business-info-star{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
    font-size: 3.1vw;
}
.business li .business-info .business-info-star .business-info-star-left{
    display: flex;
    align-items: center;
}

.business li .business-info .business-info-star .business-info-star-left p{
    color: #666;
    margin-left: 1vw;
}
.business li .business-info .business-info-star .business-info-star-right{
    background-color: #0097FF;
    color: #fff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0 0.6vw;
}
.business li .business-info .business-info-delivery{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;

    color: #666;
    font-size: 3.1vw;
}
.business li .business-info .business-info-explain{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
}
.business li .business-info .business-info-explain div{
    border: solid 1px #DDD;
    font-size: 2.8vw;
    color: #666;
    border-radius: 3px;
    padding: 0 0.1vw ;
}
.business li .business-info .business-info-promotion{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8vw;
}
.business li .business-info .business-info-promotion .business-info-promotion-left{
    display: flex;
    align-items: center;
}
.business-info-promotion-left-incon{
    width: 4vw;
    height: 4vw;
    background-color: #70BC46;
    border-radius: 3px;
    font-size: 3vw;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
}
.business li .business-info .business-info-promotion .business-info-promotion-left p{
    color: #666;
    font-size: 3vw;
    margin-left: 2vw;
}
.business li .business-info .business-info-promotion .business-info-promotion-right{
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    color: #999;
}
.business li .business-info .business-info-promotion .business-info-promotion-right p{
    margin-right: 2vw;
}
</style>